<template>
    <div>
        <mt-field label="地址" placeholder="请选择地址" v-model="address" @click.native="showAddressPicker"></mt-field>
        <mt-field label="健康状态" placeholder="请选择健康状态" v-model="health" @click.native="showHealthPicker"></mt-field>
        <mt-field label="体温状态" placeholder="请选择体温状态" v-model="temperature" @click.native="showTemperaturePicker"></mt-field>
        <mt-field label="接触病人情况" placeholder="请选择接触情况" v-model="contact" @click.native="showContactPicker"></mt-field>
        <mt-button type="default" @click="send">提交</mt-button>
        <mt-popup v-model="addressPopupVisible" position="bottom">
            <mt-picker :slots="addressSlots" value-key="name" @change="onAddressChange"></mt-picker>
        </mt-popup>
        <mt-popup v-model="healthPopupVisible" position="bottom">
            <mt-picker :slots="healthSlots" @change="onHealthChange"></mt-picker>
        </mt-popup>
        <mt-popup v-model="temperaturePopupVisible" position="bottom">
            <mt-picker :slots="temperatureSlots" @change="onTemperatureChange"></mt-picker>
        </mt-popup>
        <mt-popup v-model="contactPopupVisible" position="bottom">
            <mt-picker :slots="contactSlots" @change="onContactChange"></mt-picker>
        </mt-popup>
    </div>
</template>

<script>
    import location  from "../../../assets/data/location.json"
    import {healthDay,findHealth} from "../../../api";

    export default {
        name: "HealthDay",
        data () {
            return {
                address:'',
                health: '',
                temperature: '',
                contact: '',
                addressPopupVisible:false,
                healthPopupVisible:false,
                temperaturePopupVisible:false,
                contactPopupVisible:false,
                addressSlots: [
                    {
                        values: [],
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                    }, {
                        values: [],
                        textAlign: 'center'
                    },
                    {
                        divider: true,
                        content: '-',
                    },
                    {
                        values: [],
                        textAlign: 'center'
                    }
                ],
                healthSlots: [
                    {
                        values: [],
                        textAlign: 'center'
                    },
                ],
                temperatureSlots: [
                    {
                        values: [],
                        textAlign: 'center'
                    },
                ],
                contactSlots: [
                    {
                        values: [],
                        textAlign: 'center'
                    },
                ]
            }
        },
        async mounted(){
            let result = await findHealth()
            if(result.data){
                this.address = result.data.locationStatus
                this.health = result.data.healthStatus
                this.temperature = result.data.temperature
                this.contact = result.data.contact
            }
        },
        methods:{
            showAddressPicker(){
               let re = Object.keys(location).filter(function (key) {
                   return location[key]['depth'] == 1
               })
                let province = []
                re.forEach(function (key) {
                    province.push(location[key])
                })
                this.addressSlots[0]['values'] = province
                this.addressPopupVisible = true;
            },
            showHealthPicker(){
                this.healthSlots[0]['values'] = ['良好','发烧、咳嗽、乏力','被隔离','被确诊']
                this.healthPopupVisible = true;
            },
            showTemperaturePicker(){
                this.temperatureSlots[0]['values'] = ['正常(36-37.2)','低烧(37.3-38)','正常(38.1-41)']
                this.temperaturePopupVisible = true;
            },
            showContactPicker(){
                this.contactSlots[0]['values'] = ['无相关情况','接触过疑似病人','接触过确诊病人']
                this.contactPopupVisible = true;
            },
            onAddressChange(picker,values) {
                this.address = values[0]['name']

                let re = Object.keys(location).filter(function (key) {
                    return location[key]['depth'] == 2 && location[key]['parentid'] == values[0]['id']
                })
                if(re.length != 0){
                    let city = []
                    re.forEach(function (key) {
                        city.push(location[key])
                    })
                    picker.setSlotValues(1,city)
                    this.address = values[0]['name'] + '-' + values[1]['name']
                }

                let re1 = Object.keys(location).filter(function (key) {
                    return location[key]['depth'] == 3 && location[key]['parentid'] == values[1]['id']
                })
                if(re1.length != 0){
                    let county = []
                    re1.forEach(function (key) {
                        county.push(location[key])
                    })
                    picker.setSlotValues(2,county)
                    this.address = values[0]['name'] + '-' + values[1]['name'] + '-' + values[2]['name']
                }else {
                    let county = []
                    picker.setSlotValues(2,county)
                    this.county = ''
                    this.address = values[0]['name'] + '-' + values[1]['name']
                }

            },
            onHealthChange(picker,values){
                console.log(picker)
                this.health = values[0]
            },
            onTemperatureChange(picker,values){
                console.log(picker)
                this.temperature = values[0]
            },
            onContactChange(picker,values){
                console.log(picker)
                this.contact = values[0]
            },
            async send(){
                let data = {
                    locationStatus: this.address,
                    healthStatus: this.health,
                    temperature: this.temperature,
                    contact: this.contact
                }
                let result = await healthDay(data)
                console.log(result)
            }
        }

    }
</script>

<style scoped>

</style>